
<!-- <template>
  <Editor :id="id" :ref="id" v-model="content" :init="config"></Editor>
</template> -->

<!-- <script>
import tinymce from "tinymce";

import "tinymce/themes/silver/theme.min.js";
import "tinymce/icons/default/icons";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";

import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/contextmenu";

import "tinymce/plugins/codesample";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/media";
import "tinymce/plugins/emoticons";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/preview";
import "tinymce/plugins/pagebreak";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/hr";
import "tinymce/plugins/paste";
import "tinymce/skins/ui/oxide/skin.css";
import Editor from "@tinymce/tinymce-vue";
//import { ServUploadImg } from "@/service/appService";//上传图片。目前还没有接口
export default {
  name: "CompEditor",
  emits: ["update:value"],
  props: {
    id: {
      type: String,
      default: "vue-editor-" + new Date().getTime(), // 同页面引用多个组件时，ID必须保持唯一
    },
    value: {
      type: String,
      default: "",
    },
    height: {
      type: Number,
      default: 300,
    },
  },
  components: { Editor },
  setup(props: any, context: any) {
    const content = ref<string>(props.value);

    watch(
      () => props.value,
      (nval: string) => {
        content.value = nval;
      }
    );

    watch(content, (nval: string) => {
      context.emit("update:value", nval);
    });

    const config = {
      selector: "#" + props.id, //富文本编辑器的id
      language: "zh_CN", //语言
      language_url: "/plugin/tinymce/zh_CN.js", //语言包
      //   skin_url: '/plugin/skins/ui/oxide', //编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
      menubar: true, //菜单条
      plugins:
        "link lists image code table colorpicker textcolor wordcount contextmenu  media table fullscreen preview pagebreak insertdatetime hr paste", //插件
      toolbar:
        "bold italic underline strikethrough  | fontselect | fontsizeselect | formatselect  | forecolor backcolor  | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | removeformat| undo redo | link unlink image media insertdatetime table  hr pagebreak | code fullscreen preview", //工具条
      font_formats:
        "Arial=arial,helvetica,sans-serif; 宋体=SimSun;  微软雅黑=微软雅黑; Impact=impact,chicago;", //字体
      fontsize_formats: "11px 12px 14px 16px 18px 24px 36px 48px 64px 72px", //文字大小
      height: props.height, //高度
      branding: false, //水印
      elementpath: false, //底部元素路径
      paste_data_images: true, //允许粘贴图片
      video_template_callback: (data: any) => {
        //视频设置回调
        return `<video width="
                    ${data.width} " height="${data.height}"
                    ${data.poster ? 'poster="' + data.poster + '"' : ""}
                    controls="controls">
                    <source src="${data.source}"/>
                </video>`;
      },
      // 图片本地上传方法  点击上传后执行的事件
      images_upload_handler: (blobInfo: any, success: any, failure: any) => {
        // const img = "data:image/jpeg;base64," + blobInfo.base64();  // 如果以 string 方式提交上传图片，请使用此参数
        let formdata = new FormData(); 
        formdata.append("file", blobInfo.blob());
        ServUploadImg(formdata).then((res) => {
           success(res.data[0]);
        });  
       
      },
    };

    const onInput = () => {};

    onMounted(() => {
      tinymce.init(config);
    });

    return { config, content, onInput };
  },
};
</script>

<style scoped lang="scss"></style> -->
